<template>
	<view class="body">
		<view class="date" style="width: 184rpx;height: 50rpx; color: #006eff;background-color: #e4f0ff;">
			<uni-datetime-picker v-model="single" type="daterange">
				<text>选择时间</text>
				<uni-icons type="bottom" size="15" color="#006eff"></uni-icons>
			</uni-datetime-picker>
		</view>
		<view class="information" v-for="v in visitorsdata" :key="v.id">
			<view @click="go(v.visitorName)">
				<view class="communityName">
					<text>{{v.visitorHouse.room}}</text>
					<text class="force">{{v.visitState.visitState}}</text>
				</view>
				<view class="informationOne">
					<text>访客姓名</text>
					<text>{{v.visitorName}}</text>
				</view>
				<view class="informationOne">
					<text>访问日期</text>
					<text>{{v.date}}</text>
				</view>
				<view class="informationOne">
					<text>访问时长</text>
					<text>{{v.duration}}</text>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../utils/http.js'
	export default {
		data() {
			return {
				single: '',
				visitorsdata: []
			}
		},
		methods: {
			go(v) {
				// console.log(v);
				uni.navigateTo({
					url: '../visitorDetails/visitorDetails?name=' + v
				});
			},
			getData() {
				http({
					url: '/visitor/list',
					method: 'get',
					params: {
						page: 1,
						limit: 10
					}
				}).then(({
					data
				}) => {
					console.log(data);
					this.visitorsdata = data;
				})
			}
		},
		onLoad() {
			this.getData();
		}
	}
</script>

<style lang="less">
	@import url("../../static/font/iconfont.css");

	.public() {
		width: 136rpx;
		height: 40rpx;
		border-radius: 15rpx;
	}


	.body {
		.date {
			font-size: 26rpx;
			text-align: center;
			line-height: 50rpx;
			margin: 42rpx 0 42rpx 32rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
		}

		.information {
			height: 328rpx;
			border: 1rpx solid #eee;
			margin: 0 30rpx 36rpx;
			padding: 0 30rpx;
			border-radius: 20rpx;

			.communityName {
				height: 108rpx;
				text-align: center;
				border-bottom: 1rpx solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.force {
					.public();
					background-color: #d4f6e3;
					color: #3bd67f;
				}

				.effective {
					.public();
					background-color: #ffe9d6;
					color: #ff9037;
				}

				.expired {
					.public();
					background-color: #f2f2f2;
					color: #cdcdcd;
				}
			}

			.informationOne {
				font-size: 30rpx;
				margin-top: 20rpx;
			}

			.informationOne :nth-child(1) {
				color: #919191;
				margin-right: 30rpx;
			}

		}

	}
</style>
